<script setup>
import OImage from "../setting/Images.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Slider from "../setting/Slider.vue";
import Color from "../setting/Color.vue";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:config", "change"]),
  pageConfig = inject("pageConfig", []);

const form = ref({
  $position: { left: 15, top: 15 },
  $size: { width: 345, height: 50 },
  $removeable: true,
  textPosition: { left: 10, top: 10 },
  textSize: { width: 320, height: 30 },
  autoplay: 3000,
  lineNum: 1,
  type: "lottery",
  bgShow: false,
  bgImg: "",
  bgColor: "#F27422",
  borderRadius: 5,
  textColor: "#ffffff",
});

const formRef = ref();

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const rules = {
  lineNum: [{ required: true, message: "请填写公告显示数量", trigger: "blur" }],
  autoplay: [
    { required: true, message: "请填写公告切换间隔", trigger: "blur" },
  ],
  $pageFlag: [
    { required: true, message: "请选择关联中奖信息", trigger: "change" },
  ],
};

const lotteryAreas = computed(() => {
  let lottery = [
    "Gashapon",
    "Shake",
    "Scratch",
    "RedEnvelope",
    "SlotMachine",
    "Jiugongge",
    "HitEgg",
    "Flop",
    "Turntable",
    "BlindBox",
  ];
  let result = pageConfig.value.filter(
    (item) => lottery.indexOf(item.type) >= 0
  );
  return result.map((item) => {
    return { name: item.name, $pageFlag: item.pageConfig.$pageFlag };
  });
});

const onChange = (val) => {
  detail.value = detail.value;
};

// 表单校验
const check = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate(async (valid, invalidFields) => {
      if (valid) {
        // 是否关联抽奖区域
        // if (
        //   detail.value.type === "lottery" &&
        //   !lotteryAreas.value.find(
        //     (item) => item.$pageFlag === detail.value.$pageFlag
        //   )
        // ) {
        //   detail.value.$pageFlag = "";
        //   reject(`${props.name}未关联中奖信息`);
        // }
        resolve();
      } else
        reject(
          `${props.name}校验未通过，${
            invalidFields[Object.keys(invalidFields)[0]][0].message
          }`
        );
    });
  });
};

onMounted(() => {
  nextTick(() => {
    onChange();
  });
});

defineExpose({ check });
</script>
<template>
  <el-form
    ref="formRef"
    :model="detail"
    :rules="rules"
    label-width="auto"
    :disabled="disabled"
  >
    <!-- <el-form-item label="显示公告数量:" prop="lineNum">
      <EasyNumberInput
        v-model="detail.lineNum"
        :min="1"
        :max="10"
        unit="条"
        @change="onChange"
      />
    </el-form-item> -->
    <el-form-item label="公告切换间隔:" prop="autoplay">
      <EasyNumberInput
        v-model="detail.autoplay"
        :min="1"
        :max="Infinity"
        :precision="0"
        unit="毫秒"
        @change="onChange"
      />
    </el-form-item>
    <!-- <el-form-item label="关联中奖信息:" prop="$pageFlag">
      <el-select
        v-model="detail.$pageFlag"
        placeholder="请选择"
        style="width: 200px"
        @change="onChange"
      >
        <el-option
          v-for="(item, key) in lotteryAreas"
          :label="item.name"
          :value="item.$pageFlag"
        />
      </el-select>
    </el-form-item> -->
    <OImage
      v-model="detail.bgImg"
      v-model:show="detail.bgShow"
      name="背景图片"
      @change="onChange"
    />
    <AlphaColor v-model="detail.bgColor" name="背景色" @change="onChange" />
    <Slider
      v-model="detail.borderRadius"
      name="圆角"
      :min="0"
      :max="50"
      @change="onChange"
    />
    <Color v-model="detail.textColor" name="文字颜色" @change="onChange" />
  </el-form>
</template>
